<template>
	<div class="w100 h100 position-relative">
		<three class="three" :type="activeName" />
		<div class="left flex-col">
			<!-- 井下人员信息 -->
			<personnel
				class="flex-col f1 h0"
				:data="personnelData.workerData"
				:total="personnelData.workerTotal"
				:fileType="{
					name: 'systemName',
					value: 'workerCount'
				}"
			/>
			<!-- 人员位置查询 -->
			<position class="flex-col f1 h0 m-t-10" :list="positionList"></position>
		</div>

		<div class="bottom flex">
			<my-box class="f1 w0" title="信息发布">
				<h3 class="f-s-24 m-y-10">《{{ publishInfoData.publishTitle }}》</h3>
				<p class="pre overflow-y-auto" style="max-height: 100px; line-height: 1.8rem">
					{{ publishInfoData.publishContent }}
				</p>
			</my-box>
			<!-- 告警信息 -->
			<giveAlarm class="f1 w0 m-l-10" :list="giveAlarmList"></giveAlarm>
		</div>

		<div class="right flex-col">
			<el-tabs v-model="activeName" class="f1 h0 flex-col" @tab-click="handleClick">
				<el-tab-pane v-for="item in tabsList" :key="item.name" :label="item.name" :name="item.name">
					<img class="h100 w100" :src="getImgUrl(`MakeDecision/${item.img}`)" alt="" />
				</el-tab-pane>
			</el-tabs>
		</div>
	</div>
</template>

<script setup name="/index">
import three from '../../comprehensive/home/three.vue'
import personnel from '../components/personnel.vue'
import giveAlarm from '../components/giveAlarm.vue'
import position from '../components/position.vue'
import { workerCount, workerInfo, alarmInfo, publishInfo } from '@a/make-decision-emergency-command'

/*************************************** 井下人员信息 ********************************/
let personnelData = ref({})
workerCount().then((res) => {
	personnelData.value = res.data
})

/*************************************** 人员位置查询 ********************************/
let positionList = ref([])
function workerInfoFn() {
	workerInfo().then((res) => {
		positionList.value = res.data
	})
}
workerInfoFn()

/******************************************* 信息发布 ********************************/
let publishInfoData = ref({})
publishInfo().then((res) => {
	publishInfoData.value = res.data
})

/******************************************* 告警信息 ********************************/
let giveAlarmList = ref([])
alarmInfo().then((res) => {
	giveAlarmList.value = res.data
})

/******************************************* 图片显示 ********************************/
let tabsList = [
		{
			name: '大面积停电',
			img: '大面积停电.png'
		},
		{
			name: '顶板与冲击地压',
			img: '顶板与冲击地压.png'
		},
		{
			name: '火灾',
			img: '火灾.png'
		},
		{
			name: '突水',
			img: '突水.png'
		},
		{
			name: '事故汇报',
			img: '事故汇报.png'
		},
		{
			name: '应急响应',
			img: '应急响应.png'
		}
	],
	activeName = ref(tabsList[0].name)
</script>

<style scoped lang="scss">
.left {
	position: absolute;
	top: 0;
	left: 0;
	width: 400px;
	padding: 26px 0 10px 10px;
	background: linear-gradient(90deg, #0d1018 0%, rgba(13, 16, 24, 0) 100%);
	z-index: 2;
	box-sizing: border-box;
	height: 70%;
}
.bottom {
	padding: 0 0 10px 10px;
	box-sizing: border-box;
	height: 30%;
	position: absolute;
	bottom: 0;
	left: 0;
	width: calc(100% - 430px);
	background: linear-gradient(90deg, #0d1018 0%, rgba(13, 16, 24, 0) 100%);
}
.right {
	position: absolute;
	top: 0;
	right: 0;
	width: 420px;
	padding: 26px 10px 10px 0;
	background: linear-gradient(270deg, #0d1018 0%, rgba(13, 16, 24, 0) 100%);
	z-index: 2;
	box-sizing: border-box;
	height: 100%;
	:deep() {
		.el-tabs__content {
			flex: 1;
			height: 0;
			.el-tab-pane {
				height: 100%;
			}
		}
	}
}
</style>
